<!--全咨事业部在建项目projectBuildingStatistics的编辑弹窗-->
<template>
    <div class="mycontainer">
        <el-form :label-position="labelPosition" ref="form" :model="form">
            <el-row>
                <el-col span="9">
                <el-form-item label="信息提供人：">
                    <el-input v-model="form.clueName" :disabled="true"></el-input>
                </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                <el-form-item label="项目前期跟踪：">
                    <el-input v-model="form.name" :disabled="true"></el-input>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                <el-form-item label="关键因素项目成功推动：">
                    <el-input v-model="form.keyName" :disabled="true"></el-input>
                </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                <el-form-item label="成功落地签订合同：">
                    <el-input v-model="form.contracts" :disabled="true"></el-input>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                <el-form-item label="项目编号：">
                    <el-input v-model="form.projectId" :disabled="true"></el-input>
                </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="领取编号日期：">
                    <el-input v-model="form.idGetDate" :disabled="true"></el-input>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                <el-form-item label="业主名称：">
                    <el-input v-model="form.customName" :disabled="true"></el-input>
                </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                     <el-form-item label="项目名称：">
                    <el-input v-model="form.projectName" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col span="9">
                    <el-form-item label="项目进展：">
                        <el-input v-model="form.projectProgess" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="项目区域：">
                        <el-input v-model="form.projectArea" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                   <el-form-item label="项目类型:">
                    <el-input v-model="form.projectType" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="合同金额（元）：">
                        <el-input v-model="form.contractAmount" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                    <el-form-item label="工程投资（元）：">
                        <el-input placeholder="请输入内容" v-model="form.projectInvestment" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="项目经理：">
                        <el-input placeholder="请输入内容" v-model="form.projectManager" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 项目进度（工程量） -->
            <el-row style="width: 100%;height:220px;margin-bottom:10px;">
                <el-col span="24" style="margin-top:20px;"><h4>项目进度（工程量）</h4></el-col>
                <el-col span="24" style="margin-bottom:10px;color: #909399;font-size:12px;">单位%,精确到小数点后1位</el-col>
                <el-col span="24">
                  <!-- <el-form-item label="项目进度（工程量）"> -->
                    <el-table :data="form.work" border style="width: 100%;margin-top:5px;" @cell-click="handleCellClick" size="mini" @cell-mouse-leave="handleCellLeave" header-cell-class-name="table-header-gray">
                        <el-table-column prop="jan" label="1月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.jan" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                              <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.jan}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="feb" label="2月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.feb" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.feb}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="mar" label="3月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.mar" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.mar}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="apr" label="4月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.apr" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.apr}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="may" label="5月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.may" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.may}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="jun" label="6月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.jun" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.jun}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="jul" label="7月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.jul" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.jul}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="aug" label="8月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.aug" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.aug}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="sept" label="9月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.sept" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.sept}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="oct" label="10月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.oct" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.oct}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="nov" label="11月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.nov" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.nov}}</div>
                        </div>
                        </el-table-column>
                        <el-table-column prop="december" label="12月" align="center" show-overflow-tooltip>
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.december" oninput ="value=value.replace(/[^0-9.]/g,'')" clearable>
                               <i slot="suffix">%</i>
                            </el-input>
                            <div class="item__txt">{{scope.row.december}}</div>
                        </div>
                        </el-table-column>
                    </el-table>
                  <!-- </el-form-item>      -->
                </el-col>
            </el-row>
            <el-row>
                <el-col span="24">
                <el-form-item label="备注:">
                    <el-input type="textarea" v-model="form.remark" placeholder="请输入内容"></el-input>
                </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span style="text-align:center;display:block;">
              <el-button @click="offSubmit" style="margin-right:20px;">取消</el-button>
              <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
    </div>
</template>
 
<script>
import InvitationStatisticsTable from '@/api/BigDataAnalysis/InvitationStatisticsTable';
export default {
  components: {},
  data () {
    return {
      labelPosition: 'top',
      sumWork: 0.0,
      work1: 0.0,
      work2: 0.0,
      work3: 0.0,
      work4: 0.0,
      work5: 0.0,
      work6: 0.0,
      work7: 0.0,
      work8: 0.0,
      work9: 0.0,
      work10: 0.0,
      work11: 0.0,
      work12: 0.0,
      form: {
        clueName: '',
        name: '',
        keyName: '',
        contracts: '',
        idGetDate: '',
        projectId: '',
        projectName: '',
        customName: '',
        projectProgess: '',
        contractAmount: '',
        projectType: '',
        projectManager: '',
        projectArea: '',
        projectInvestment: '',
        remark: '',
        work: []
      },
      // 需要编辑的属性
      editProp: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sept', 'oct', 'nov', 'december']
    }
  },
  methods: {
    dataInit (data) {
      if (data) {
        //  this.form = JSON.parse(JSON.stringify(data));
        this.form.clueName = data.clueName;
        this.form.name = data.name;
        this.form.keyName = data.keyName;
        this.form.contracts = data.contracts;
        this.form.idGetDate = data.idGetDate;
        this.form.projectId = data.projectId;
        this.form.projectName = data.projectName;
        this.form.customName = data.customName;
        this.form.projectProgess = data.projectProgess;
        this.form.contractAmount = data.contractAmount;
        this.form.projectType = data.projectType;
        this.form.projectManager = data.projectManager;
        this.form.projectArea = data.projectArea;
        this.form.projectInvestment = data.projectInvestment;
        this.form.remark = data.remark;
        this.loadTableData();
        // console.info(data);
      }
    },
    //  获取表格数据
    loadTableData () {
      // if(JSON.stringify(this.form.work))
      let params = {
        projectId: this.form.projectId
      }
      return new Promise((resolve, reject) => {
        console.info(this.form.projectId);
        InvitationStatisticsTable.listWork(this, params).then(res => {
          console.info('绑定数据');
          if (this.form.work === undefined || this.form.work.length <= 0) {
            if (res.data[0] == null) {
              this.form.work = [{jan: '', feb: '', mar: '', apr: '', may: '', jun: '', jul: '', aug: '', sept: '', oct: '', nov: '', december: ''}];
              console.info('空数据');
            } else {
              this.form.work = res.data;
              console.info('有数据');
            }
            // console.info(JSON.stringify(this.form.work[0]));
          }
        }).catch(e => {
          reject(e);
        });
      });
    },
    getSumWork () {
      if (isNaN(this.form.work[0].jan)) {
        console.info('feifa1');
        this.work1 = 0;
      } else {
        this.work1 = parseFloat(this.form.work[0].jan);
      }
      if (isNaN(this.form.work[0].feb)) {
        console.info('feifa2');
        this.work2 = 0;
      } else {
        this.work2 = parseFloat(this.form.work[0].feb);
      }
      if (isNaN(this.form.work[0].mar)) {
        console.info('feifa3');
        this.work3 = 0;
      } else {
        this.work3 = parseFloat(this.form.work[0].mar);
      }
      if (isNaN(this.form.work[0].apr)) {
        console.info('feifa4');
        this.work4 = 0;
      } else {
        this.work4 = parseFloat(this.form.work[0].apr);
      }
      if (isNaN(this.form.work[0].may)) {
        console.info('feifa5');
        this.work5 = 0;
      } else {
        this.work5 = parseFloat(this.form.work[0].may);
      }
      if (isNaN(this.form.work[0].jun)) {
        console.info('feifa6');
        this.work6 = 0;
      } else {
        this.work6 = parseFloat(this.form.work[0].jun);
      }
      if (isNaN(this.form.work[0].jul)) {
        console.info('feifa7');
        this.work7 = 0;
      } else {
        this.work7 = parseFloat(this.form.work[0].jul);
      }
      if (isNaN(this.form.work[0].aug)) {
        console.info('feifa8');
        this.work8 = 0;
      } else {
        this.work8 = parseFloat(this.form.work[0].aug);
      }
      if (isNaN(this.form.work[0].sept)) {
        console.info('feifa9');
        this.work9 = 0;
      } else {
        this.work9 = parseFloat(this.form.work[0].sept);
      }
      if (isNaN(this.form.work[0].oct)) {
        console.info('feifa10');
        this.work10 = 0;
      } else {
        this.work10 = parseFloat(this.form.work[0].oct);
      }
      if (isNaN(this.form.work[0].nov)) {
        console.info('feifa11');
        this.work11 = 0;
      } else {
        this.work11 = parseFloat(this.form.work[0].nov);
      }
      if (isNaN(this.form.work[0].december)) {
        console.info('feifa12');
        this.work12 = 0;
      } else {
        this.work12 = parseFloat(this.form.work[0].december);
      }
      this.sumWork = this.work1 + this.work2 + this.work3 + this.work4 + this.work5 + this.work6 + this.work7 + this.work8 + this.work9 + this.work10 + this.work11 + this.work12;
    },
    offSubmit () {
      this.$emit('closeWindow');
    },
    onSubmit () {
      if (parseFloat(this.form.work[0].jan) > 100 || parseFloat(this.form.work[0].feb) > 100 || parseFloat(this.form.work[0].mar) > 100 || parseFloat(this.form.work[0].apr) > 100 ||
        parseFloat(this.form.work[0].may) > 100 || parseFloat(this.form.work[0].jun) > 100 || parseFloat(this.form.work[0].jul) > 100 || parseFloat(this.form.work[0].aug) > 100 ||
        parseFloat(this.form.work[0].sept) > 100 || parseFloat(this.form.work[0].oct) > 100 || parseFloat(this.form.work[0].nov) > 100 || parseFloat(this.form.work[0].december) > 100) {
        this.$message({
          showClose: true,
          message: '请输入合理的项目进度！',
          type: 'error',
          offset: '300'
        });
      } else {
        this.getSumWork();
        console.info(this.sumWork);
        if (this.sumWork > 100) {
          this.$message({
            showClose: true,
            message: '工程量百分比合计应小于等于100%！',
            type: 'error',
            offset: '300'
          });
        } else {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              let params = {
              // ...this.form
                clueName: this.form.clueName,
                name: this.form.name,
                keyName: this.form.keyName,
                contracts: this.form.contracts,
                idGetDate: this.form.idGetDate,
                projectId: this.form.projectId,
                projectName: this.form.projectName,
                customName: this.form.customName,
                projectProgess: this.form.projectProgess,
                contractAmount: this.form.contractAmount,
                projectType: this.form.projectType,
                projectManager: this.form.projectManager,
                projectArea: this.form.projectArea,
                projectInvestment: this.form.projectInvestment,
                remark: this.form.remark,
                jan: this.form.work[0].jan,
                feb: this.form.work[0].feb,
                mar: this.form.work[0].mar,
                apr: this.form.work[0].apr,
                may: this.form.work[0].may,
                jun: this.form.work[0].jun,
                jul: this.form.work[0].jul,
                aug: this.form.work[0].aug,
                sept: this.form.work[0].sept,
                oct: this.form.work[0].oct,
                nov: this.form.work[0].nov,
                december: this.form.work[0].december
              }
              return new Promise((resolve, reject) => {
                InvitationStatisticsTable.updateProjectBuilding(this, params).then(res => {
                  this.$message({
                    showClose: true,
                    message: '编辑成功！',
                    type: 'success',
                    offset: '300',
                    onClose: () => {
                      this.$emit('updateWindow');
                    }
                  });
                }).catch(e => {
                  reject(e);
                });
              });
            } else {
              this.$message({
                showClose: true,
                message: '编辑失败！',
                type: 'error',
                offset: '300'
              });
              console.log('error submit!!');
              return false;
            }
          });
        }
      }
    },
    /** 鼠标点击cell */
    handleCellClick (row, column, cell, event) {
      const property = column.property
      if (this.editProp.includes(property)) {
        cell.querySelector('.item__input').style.display = 'block'
        cell.querySelector('.item__txt').style.display = 'none'
      }
    },
    /** 鼠标移出cell */
    handleCellLeave (row, column, cell, event) {
      const property = column.property
      if (this.editProp.includes(property)) {
        cell.querySelector('.item__input').style.display = 'none'
        cell.querySelector('.item__txt').style.display = 'block'
      }
    }
  }
}
</script>
<style>
    .mycontainer {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
</style>
<style lang='scss'>
  .item{
    .item__input{
      display: none;
      width: 95px;
      /* 调整elementUI中样式 如果不需要调整请忽略 */
      .el-input__inner{
        height: 24px!important;
      }
      /* 调整elementUI中样式 如果不需要调整请忽略 */
      .el-input__suffix{
        i{
          font-size: 12px !important;
          line-height: 26px !important;
        }
      }
    }
    .item__txt{
      display: block;
      box-sizing: border-box;
      line-height: 24px;
      padding: 0 9px;
    }
  }
</style>
